<template>
<div class="HeadSet">
    <div class="container">
      <div class="bk" v-show="showCropper">
        <div class="img-container" >
          <img :src="imgSrc" alt="" ref="img" class="img">
        </div>
      </div>
      <el-button @click="upload" ref="post" class="post" v-if="btnShow"  type="primary">提交</el-button>
      <el-button @click="del" ref="del" class="del" v-if="btnShow" type="danger">取消</el-button>
      <el-upload
      action="none"
      list-type="picture-card"
      :show-file-list="false"
      :auto-upload="false"
      :on-change="handleChange"
      class="upload"
      ref="upload"
      >
      <i class="el-icon-plus"></i>
      <el-button slot="trigger" size="small" type="primary" id="btnCheck" v-if="btnShow">重新选取文件</el-button>
      </el-upload>
      <div class="preview-box"  v-show="showCropper">
        <!-- 宽高为 100px 的预览区域 -->
        <div class="img-preview show"></div>
      </div>
    </div>
</div>

</template>

<script>
import Cropper from 'cropperjs/dist/cropper.js'
import 'cropperjs/dist/cropper.css'
import {base64ImgtoFile} from '@/utils/index'
export default {
    name:'HeadSet',
    data() {
      return {
        imgSrc:'',
        myCropper:null,
        fileList:[],
        btnShow:false,
        showCropper:true
      };
    },
    created(){

    },
    mounted(){
      this.myCropper = this.cropper
    },
    methods:{
      handleChange(file, fileList) {
        this.showCropper = true
        fileList.length = 0;
        fileList.push(file);
        if(!file.raw.type.startsWith('image') ){
          this.$message({
            message:'只能选择图片哦',
            type: "error",
          })
          fileList.length = 0;
          return;
        }
        FileReader.prototype.VueThis = this;
        let read = new FileReader();
        read.readAsDataURL(file.raw);
        read.onload = function() {
          read.VueThis.$refs.img.src = this.result
          read.VueThis.myCropper.replace(this.result,false)
          delete FileReader.prototype.VueThis
        };
        this.btnShow = true
        this.$refs.upload.$el.style.zIndex = 0;
      },
      upload(){
        let file = this.myCropper.getCroppedCanvas({
          width:640,
          height:640,
        }).toDataURL('image/jpeg')
        let File = base64ImgtoFile(file);
        let formData = new FormData();
        formData.append('file',File)
        this.$store.dispatch('personalCenter/reqSendHeaderImage', formData).then((result)=>{
          if(result.data.status == '200'){
            this.$message({
                message:result.data.message,
                type: "success",
            });
          }else{
              this.$message({
                  message:result.data.message || '上传失败',
                  type: "error",
              });
          }
          let time = setTimeout(()=>{
            location.reload();
            clearTimeout(time)
          },2000)
        });
      },
      del(){
        this.showCropper = false
        this.btnShow = false
        this.$refs.upload.$el.style.zIndex = 3;
        this.$refs.img.src = ''
      }
    },
    computed: {
      cropper() {
        return new Cropper(this.$refs.img, {
          aspectRatio: 1 / 1,
          dragMode:'none',
          viewMode:1,
          movable :false,
          scalable:false,
          zoomOnWheel:false,
          cropBoxResizable :false,
          preview: '.img-preview' //预览区
        });
      },
    
    },
}
</script>

<style lang="less">
.HeadSet{
    width: 100%;
    height: 100%;
  .container{
    position: relative;
    height: 400px;
    width: 600px;
    display: flex;
    .bk{
      order: 1;
      width: 300px;
      height: 300px;
      position: absolute;
      left: 0px;
      z-index: 1;
      .img-container{
        width: 300px;
        height: 300px;
        position: absolute;
        left: 0px;
        img{
          max-height: 100%;
          max-width: 100%;
          display: block;
        }
      }
      .el-divider{
        height: 20em;
        position: absolute;
        left: 350px;
        background: rgb(63, 61, 61);
      }
    }
    .upload{
      width: auto;
      order: 2;
      position: absolute;
      left: 70px;
      top: 70px;
      z-index: 2;
      .el-upload {
        position: relative;
        #btnCheck{
          width: 120px;
          position: absolute;
          bottom: -150px;
          left: 0px;
          right: 0px;
          margin: 0 auto;
          height: 40px;
          span{
            font-family: 'FZZYJT';
            font-size: 14px;
          }
        }
      }

    }
    .post{
      order: 4;
      width: 100px;
      height: 40px;
      position: absolute;
      right: 50px;
      bottom: 100px;
      span{
        font-family: 'FZZYJT';
      }
    }
    .show{
      order: 3;
      width: 200px;
      height: 200px;
      position: absolute;
      right: 0px;
      overflow: hidden;
      border-radius:50% ;
    }
    .des{
      position: absolute;
      bottom: 100px;
      left: 100px;
    }
    .del{
      position: absolute;
      bottom: 35px;
      right: 50px;
      z-index: 3;
      width: 100px;
      height: 40px;
      span{
        font-family: 'FZZYJT';
      }
    }
  }
}



</style>
